<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <Item :item="label"></Item
      ><i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown" style="max-height: 200px; overflow: auto">
      <el-dropdown-item
        v-for="(item, index) in getAllLabels"
        :key="index"
        @click.native="clickItem(item)"
      >
        <Item :item="item"></Item>
      </el-dropdown-item>
      <el-dropdown-item
        divided
        @click.native="removeItem"
        style="text-align: center"
      >
        清除标签
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang="ts">
/**
 * 客户详情设置标签下拉框
 * @prop label 数组格式，下拉框点击后会同步给父组件
 * {
 *  name: '',
 *  color: '',
 *  id: ''
 * }
 */
import { Component, Vue, Prop } from 'vue-property-decorator';
import Item from './item.vue'
import { commonAction } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'LabelDropdown',
  components: {
    Item
  }
})
export default class LabelDropdown extends Vue {
  [x: string]: any
  @Prop() private label
  @Prop() private customerId

  get getAllLabels () {
    return (CommonModule as any).publicCache.customerAllLabels
  }

  private mounted () {
    this.$getCache('/server-crm/action/customer/common/labels', ['customerAllLabels'], true, false, false, 'GET', false, 'data')
  }

  private async clickItem (item) {
    const params = {
      url: '/server-crm/action/customer/labels',
      method: 'POST',
      data: {
        customerId: this.customerId,
        labels: [{
          _id: item._id,
          name: item.name
        }]
      }
    }
    const res = await commonAction(params)

    this.$emit('update:label', item)
  }

  private removeItem () {
    this.$emit('update:label', {
      name: '设置标签',
      color: '',
      id: 'abc'
    })
  }
}
</script>
<style lang="stylus" scoped>
.el-dropdown-link
  display flex
  align-items center
  cursor pointer
</style>
